<template>
  <a-modal
    :title="`各月任务情况`"
    :width="700"
    :visible="visible"
    :confirmLoading="loading"
    :footer="null"
    @cancel="
      () => {
        $emit('cancel')
      }
    "
  >
    <a-spin :spinning="loading">
      <Carousel arrows>
        <div slot="prevArrow" class="custom-slick-arrow" style="left: 10px; zindex: 1">
          <a-icon type="left-circle" style="color: #000" />
        </div>
        <div slot="nextArrow" class="custom-slick-arrow" style="right: 10px">
          <a-icon type="right-circle" style="color: #000" />
        </div>
        <div class="star-carousel-wrap" v-for="(it, index) in monthStarList" :key="index">
          <div class="star-carousel-item">
            <div class="star-carousel-month">
              <span>{{ it.byMonth }}</span>
            </div>
            <div class="star-wrap">
              <level-star
                :levelRateList="it.levelRateList"
                :userData="it.userData"
                :starList="it.starList"
              ></level-star>
            </div>
          </div>
        </div>
      </Carousel>
    </a-spin>
  </a-modal>
</template>

<script>
// "{
//     "task": {"C类": {"A": 300, "B": 20, "C": 10}},
//     "score": {"A": {"1": 1, "3": 1}, "B": {"3": 1}, "C": {"2": 1}},
//     "integral":
//         {"C类": {"rate": 0.78, "integral": 625.00, "nextRate": 0.48, "needIntegral": 800, "nextNeedIntegral": 1300}},
//     "scoreInfo":
//      {"A": {"score_1": 50, "score_3": 50, "maxScore_1": 40, "maxScore_3": 30, "maxNextScore_1": 50, "maxNextScore_3": 35},
//      "B": {"score_3": 100, "maxScore_3": 15, "maxNextScore_3": 25},
//      "C": {"score_2": 100, "maxScore_2": 15, "maxNextScore_2": 25}}, "scoreCheck": false, "nextScoreCheck": false
// }"
import pick from 'lodash.pick'
import LevelStar from './LevelStar'
import { Carousel } from 'ant-design-vue'
import { monthTaskGetMonthTask, monthTaskGetMonthTaskBySelf } from '@/api/login'
import { mapGetters } from 'vuex'
// 表单字段
const fields = ['id', 'remark', 'name']

export default {
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
  },
  components: {
    LevelStar,
    Carousel,
  },
  data() {
    return {
      loading: false,
      dKey: null,
      dId: null,
      userData: {
        nonceLevel: {},
        nextLevel: {},
        passNum: 0,
        subNum: 0,
        detailName: '',
        applyTime: '',
      },
      levelRateList: [],
      starList: [],
      monthStarList: [],
    }
  },
  created() {
    let { key, id } = this.$route.params
    this.dKey = key || 'user'
    this.dId = id || this.userInfo.id
  },
  watch: {
    visible: function (n) {
      if (n) {
        this.getAnalysis()
      }
    },
  },
  methods: {
    getAnalysis() {
      let { dKey, dId } = this
      let fun = monthTaskGetMonthTask
      
      if (this.dId == this.userInfo.id) {
        fun = monthTaskGetMonthTaskBySelf
      }
      fun({ userId: dId, byMonth: 'all' }).then((res) => {
        

        let monthStarList = []
        let levelList = res.data.levels.sort((a, b) => b.levelNum - a.levelNum)
        let taskLevels = res.data.taskLevels.sort((a, b) => b.levelNum - a.levelNum)
        monthStarList = res.data.monthTaskList.map((item, index) => {
          
          let starItem = {
            byMonth: item.byMonth.substr(0, 7),
            userData: {
              nonceLevel: item.nonceLevel || {},
              nextLevel: item.nextLevel || {},
              passNum: item.passNum || 0,
              subNum: item.subNum || 0,
              applyTime: item.applyTime || '',
            },
          }
          let taskJson = item.taskJson ? JSON.parse(item.taskJson) : ''

          let levelData = []
          levelList.forEach((v) => {
            if (taskJson.integral && taskJson.integral[v.name]) {
              // taskJson.integral
              levelData.push({ levelName: v.name, ...taskJson.integral[v.name] })
            } else {
              levelData.push({ levelName: v.name, rate: 0, integral: 0, needIntegral: 0, nextNeedIntegral: 0 })
            }
            let key = v.name.substr(0, 1)
          })
          starItem.levelRateList = levelData

          let starList = []
          let scoreInfo = taskJson.scoreInfo || {}
          taskLevels.forEach((v) => {
            let it = {
              name: v.name,
              scoreInfo: scoreInfo[v.name],
            }
            starList.push(it)
          })
          starItem.starList = starList

          return starItem
        })
        this.monthStarList = [...monthStarList]
        // this.userData.nonceLevel = res.data.nonceLevel || {}
        // this.userData.nextLevel = res.data.nextLevel || {}
        // this.userData.passNum = res.data.passNum || 0
        // this.userData.subNum = res.data.subNum || 0
        // this.userData.applyTime = res.data.applyTime || ''

        // let levelData = []
        // levelList.forEach((v) => {
        //   if (taskJson.integral && taskJson.integral[v.name]) {
        //     // taskJson.integral
        //     levelData.push({ levelName: v.name, ...taskJson.integral[v.name] })
        //   } else {
        //     levelData.push({ levelName: v.name, rate: 0, integral: 0, needIntegral: 0, nextNeedIntegral: 0 })
        //   }
        //   let key = v.name.substr(0, 1)
        // })
        // this.levelRateList = levelData

        // let starList = []
        // let scoreInfo = taskJson.scoreInfo || {}
        // taskLevels.forEach((v) => {
        //   let it = {
        //     name: v.name,
        //     scoreInfo: scoreInfo[v.name],
        //   }
        //   starList.push(it)
        // })
        // this.starList = starList

        // "{"task": {"C类": {"A": 100}}, "score": {"A": {"3": 1}}, "integral": {"C类": {"rate": 0.25, "integral": 200.00, "needIntegral": 800}}, "scoreInfo": {"A": {"score_3": 100, "maxScore_3": 30}}, "scoreCheck": false, "nextScoreCheck": true}"

        //   <!-- "{"task": {"C类": {"A": 300, "B": 20, "C": 10}}, "score": {"A": {"1": 1, "3": 1}, "B": {"3": 1}, "C": {"2": 1}},
        // "integral": {"C类": {"rate": 2.08, "integral": 625.00, "needIntegral": 300}}, "scoreCheck": false,
        // "nextScoreCheck": false}" -->
      })
    },
  },
  computed: {
    ...mapGetters({ userInfo: 'userInfo' }),
  },
}
</script>
<style scoped>
.ant-carousel >>> .custom-slick-arrow {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: #fff;
  background-color: rgba(31, 45, 61, 0.11);
  opacity: 0.3;
  z-index: 10000;
}
.star-carousel-wrap {
  padding: 0 20px;
}
.star-carousel-item {
  min-height: 300px;
}
.star-carousel-month {
  display: flex;
  justify-content: center;
  padding-bottom: 20px;
}
.star-carousel-month span {
  display: inline-block;
  font-size: 20px;
}
</style>